<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有品首页</title>
</head>

<body>

    <!-- 头部 -->
    <header>
        <!-- 菜单 -->
        <div class="menu">
            <!-- 有品 -->
            <p>有品</p>
        </div>
        <!-- 搜索框 -->
        <input type="text" id="scout" placeholder="搜索商品">
    </header>

    <!-- 主体内容 -->
    <main>
        <div class="bannerBox">
            <div class="swiper">
                <!-- 轮播图 -->
                <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide">
                        <img src="https://img1.baidu.com/it/u=1897209683,4131300900&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1645925072&t=66aa99b66f4a062e3a2ac05a472ec00d" alt="">
                    </div> -->
                </div>
            </div>
        </div>

        <!--导航列表  -->
        <div class="DhList">

        </div>

        <!-- 微淘 -->
        <div class="weiTao">
            <div class="titleBox">微淘众筹</div>
            <div class="centerBox">
                <p class="titleText">大屏互动</p>
                <p class="moneyText">￥1999</p>

                <div class="imgBox">
                    <img src="./img/2.jpg" alt="">
                </div>

                <div class="weiZhichi">
                    支持人数 <span class="ZhiChi">730</span>/完成度 <span class="WanCheng">80%</span>
                </div>
                <div class="weiJingDuBox">
                    <div class="JingDuTiao"></div>
                </div>
            </div>

            <!-- 微淘下面商品 -->
            <div class="butBox">
                <div class="leftBox">
                    <p class="titleText2">大屏互动</p>
                    <p class="moneyText2">￥1999</p>
                    <div class="imgBox2">
                        <img src="./img/2.jpg" alt="">
                    </div>
                    <div class="weiZhichi2">
                        支持人数 <span class="ZhiChi2">730</span>
                    </div>

                </div>
                <div class="rightBox">
                    <p class="titleText3">大屏互动</p>
                    <p class="moneyText3">￥1999</p>
                    <div class="imgBox3">
                        <img src="./img/2.jpg" alt="">
                    </div>
                    <div class="weiZhichi3">
                        支持人数 <span class="ZhiChi3">730</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 好物榜 -->
        <div class="haoBox">
            <div class="hwTitle">好物榜</div>
            <div class="hw1"></div>
            <div class="hw2"></div>
            <div class="hw3"></div>
        </div>
        <!-- 热销榜 -->

        <!-- 限时购 -->

        <!-- 推荐商品 -->


    </main>

    <!-- 页脚内容 -->
    <!-- <footer> </footer> -->



</body>

</html>